<template>
	<view class="pd pm100">
		<view class="pt50">
			<image src="../../static/img/serve/banner.png" class="w100" mode="widthFix"></image>
		</view>
		<view class="mt50 parentswer cen" >
			<view class="libbhs" v-for="sd in gehglist" @tap="infos">
				<view class="kjnnjbbnjs" :class="sd.clsname">
					<image :src="'../../static/img/serve/'+sd.icon" class="kjhndtt cz" mode="widthFix" :style="{width:sd.size+'upx'}"></image>
				</view>
				<view class="fz26 cf">
					{{sd.name}}
				</view>
			</view>
		</view>
		<view class="mt100">
			<image src="../../static/img/serve/kjhjsd.png" class="w100" mode="widthFix"></image>
		</view>
		<view class="mt100 cf fz32">
			为您推荐
		</view>
		<view class="z9 mt100 fz26 cen">
			暂无商品
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				gehglist:[
					{
						name:'加油站',
						icon:'fgffga.png',
						clsname:'aa',
						size:38
					},{
						name:'养护门店',
						icon:'fgffgb.png',
						clsname:'ab',
						size:38
					},{
						name:'文章问答',
						icon:'fgffgc.png',
						clsname:'ac',
						size:34
					},{
						name:'保养手册',
						icon:'fgffgd.png',
						clsname:'ad',
						size:38
					},{
						name:'车主必备',
						icon:'fgffge.png',
						clsname:'ae',
						size:42
					},{
						name:'买车险',
						icon:'fgffgf.png',
						clsname:'af',
						size:48
					},{
						name:'违章查询',
						icon:'fgffgg.png',
						clsname:'ag',
						size:42
					},{
						name:'道路救援',
						icon:'fgffgh.png',
						clsname:'ah',
						size:46
					},
				]
			}
		},
		components: {},
		methods: {
			infos(){
				uni.showToast({
					title:'即将上线'
				})
			}
		},
		mounted() {}
	}
</script>
<style scoped>
	.parentswer {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 50upx;
	}
	.kjnnjbbnjs{
		width:76upx;
		height:76upx;
		line-height: 70upx;
		text-align: center;
		margin: auto;
		background:linear-gradient(142deg,rgba(78,197,235,1) 0%,rgba(32,202,198,1) 100%);
		border-radius:50%;
		margin-bottom: 20upx;
	}
	.kjnnjbbnjs.ab{
	background:linear-gradient(145deg,rgba(254,136,130,1) 0%,rgba(254,169,108,1) 100%);
	}
	.kjnnjbbnjs.ac{
		background:linear-gradient(145deg,rgba(185,132,252,1) 0%,rgba(128,146,247,1) 100%);
	}
	.kjnnjbbnjs.ad{
		background:linear-gradient(130deg,rgba(254,115,184,1) 0%,rgba(252,119,130,1) 100%);
	}
	.kjnnjbbnjs.ae{
		background:linear-gradient(145deg,rgba(73,131,250,1) 0%,rgba(41,189,247,1) 100%)
	}
	.kjnnjbbnjs.af{
		background:linear-gradient(143deg,rgba(250,224,91,1) 0%,rgba(253,153,63,1) 100%);
	}
	.kjnnjbbnjs.ag{
		background:linear-gradient(145deg,rgba(1,212,199,1) 0%,rgba(8,167,149,1) 100%);
	}
	.kjnnjbbnjs.ah{
		background:linear-gradient(146deg,rgba(251,107,104,1) 0%,rgba(231,41,88,1) 100%);
	}
	
</style>
